<!-- 好友信息 -->
<template>
  <div class="Info-wrapper">
 
    <div class="friendInfo" v-if="infoMsg && infoStatus === 2">
      <div class="esInfo">
        <div class="left">
          <div class="people">
            <div class="nickname">{{ infoMsg.name }}</div>
            <!-- <div :class="[infoMsg.sex===1?'gender-male':'gender-female']"></div> -->
          </div>
          <div class="signature">{{ infoMsg.duty }}</div>
        </div>
        <div class="right">
          <!-- <img class="avatar"  width="60" height="60" :src="$utils.getFileUrl(infoMsg.photo)"> -->
          <img
            class="avatar"
            width="60"
            height="60"
            src="../../static/images/mother.jpg"
          />
        </div>
      </div>
      <div class="detInfo">
        <div class="remark">
          <span>单&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp位</span
          >{{ infoMsg.companyName }}
        </div>
        <div class="area">
          <span>部&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp门</span
          >{{ infoMsg.officeName }}
        </div>
        <div class="wxid"><span>办公电话</span>{{ infoMsg.mobile }}</div>
      </div>
      <div class="send">
        <span @click="sendMessage(infoMsg)" class="send_st">
          <img
            width="16px"
            height="14px"
            src="../../static/images/sendMessage.png"
          />
          <span>发消息</span>
        </span>
        <span v-if="!infoMsg.parent" @click="sendVideo('friend')" class="send_st">
          <img
            width="16px"
            height="12px"
            src="../../static/images/sendVideo.png"
          />
          <span>发视频</span>
        </span>
           <span v-if="infoMsg.parent" @click="enterGroup" class="send_st">
          <span>进入群聊</span>
        </span>
      </div>
    </div>
    <div class="group" v-if="infoStatus == 1">
      <div class="head_portrait">
        <img src="../../static/images/大飞哥.jpg" />
      </div>
      <div class="name">
        <p>群名称-------------</p>
        <p>32人</p>
      </div>
      <div class="goGroup">
        <span>进入群聊</span>
      </div>
    </div>
    <div v-if="infoStatus == 0" class="nomsg">
      <img src="../../static/images/nomsg.png" />
    </div>
  </div>
</template>

<script>
import router from "../../router";
import { mapGetters, mapState,mapActions } from "vuex";
export default {
  data() {
    return {
      infoMsg:{},//数据
      infoStatus:"",
      meeting: {
        receiveId: "0ddfb280f73b494ba48eb072ddb54b70",
        subject: "测试会议",
      },
    };
  },
  computed: {

  },
  mounted() {
   
    this.$events.$on('infoMsg',(data,status)=>{
         console.log("info页面", data,this.infoStatus);
         this.infoMsg= data;
         this.infoStatus= status
    })
  },
  methods: {
    ...mapActions(['sendVideo']),
    // 发消息
    sendMessage(item) {
      this.$store.dispatch("send",item);
      // this.$store.dispatch("search", "");
    },
    // // 发视频
    // sendVideo() {
     
    // },
    // 进入群聊
    enterGroup(){
        console.log("进入群聊")
    }
  },
};
</script>

<style lang="scss" scoped>
.Info-wrapper {
  width: 100%;
  height: 100%;
}
.nomsg {
  display: flex;
  justify-content: center;
  margin-top: calc(50% - 93px);
  img {
    width: 209px;
    height: 186px;
    background-repeat: no-repeat;
  }
}
.group {
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: space-around;
  height: 60%;
  margin-top: 20%;
  .head_portrait {
    width: 120px;
    height: 120px;
    border: 4px solid #d8d8d8;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .name{
    margin-top: -40px;
    text-align: center;
    & p:nth-child(2){
      margin-top: 10px;
    }
  }
  .goGroup{
        text-align: center;
    width: 135px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #fff;
    background-color: #ee1b24;
    cursor: pointer;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.newfriend {
  height: 60px;
  padding: 28px 0 0 30px;
  box-sizing: border-box;
  border-bottom: 1px solid #e7e7e7;

  .nickname {
    font-size: 18px;
  }
}

.friendInfo {
  padding: 0 90px;
}

.esInfo {
  display: flex;
  align-items: center;
  padding: 100px 0 45px 0;

  .left {
    flex: 1;

    .people {
      .nickname {
        display: inline-block;
        font-size: 20px;
        margin-bottom: 16px;
      }

      .gender-male,
      .gender-female {
        display: inline-block;
        width: 18px;
        height: 18px;
        vertical-align: top;
        margin-top: 2px;
      }

      .gender-male {
        background-image: url("man.png");
        background-size: cover;
      }

      .gender-female {
        background-image: url("woman.png");
        background-size: cover;
      }
    }

    .signature {
      font-size: 14px;
      color: rgba(153, 153, 153, 0.8);
    }
  }

  .right {
    .avatar {
      border-radius: 3px;
    }
  }
}

.detInfo {
  padding: 40px 0;
  border-top: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;

  .remark,
  .area,
  .wxid {
    font-size: 14px;
    margin-top: 20px;

    span {
      font-size: 14px;
      color: rgba(153, 153, 153, 0.8);
      margin-right: 40px;
    }
  }

  .remark {
    margin-top: 0;
  }
}

.send {
  display: flex;
  justify-content: space-around;
  margin-top: 45px;
  .send_st {
    text-align: center;
    width: 135px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #fff;
    background-color: #ee1b24;
    cursor: pointer;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      margin: 0 4px 0 0;
    }
    &:hover {
      background: rgb(150, 17, 17);
    }
  }
}
</style>

